<template>
  <el-dialog :title="title" width="60%" v-model="visible" :close-on-click-modal="false" draggable>
    <div v-loading="state.loading">

      <el-row class="ml10" v-show="showSearch">
        <el-form :inline="true" :model="state.queryForm" ref="queryRef">
          <!--          患者姓名-->
          <el-form-item label="患者姓名" prop="customerName">
            <el-input v-model="state.queryForm.customerName" placeholder="请输入患者姓名"/>
          </el-form-item>
          <!--          身份证号-->
          <el-form-item label="身份证号" prop="icCard">
            <el-input v-model="state.queryForm.icCard" placeholder="请输入身份证号"/>
          </el-form-item>

          <el-form-item>
            <el-button @click="queryBtn" formDialogRef icon="search" type="primary">
              {{ $t('common.queryBtn') }}
            </el-button>
            <el-button @click="resetQuery" formDialogRef icon="Refresh">{{
                $t('common.resetBtn')
              }}
            </el-button>
          </el-form-item>

        </el-form>
      </el-row>

      <el-row>
        <div class="mb8" style="width: 100%">
          <right-toolbar
              v-model:showSearch="showSearch"
              class="ml10 mr20"
              style="float: right"
              @queryTable="getDataList">
          </right-toolbar>
        </div>
      </el-row>

      <el-table height="calc(100vh - 350px)" :data="state.dataList" border
                :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle" highlight-current-row
                @sort-change="sortChangeHandle">
        <el-table-column type="index" label="#" width="60"/>
        <el-table-column prop="name" label="姓名" show-overflow-tooltip/>
        <el-table-column prop="card" label="身份证号" show-overflow-tooltip/>
        <el-table-column prop="address" label="家庭地址" show-overflow-tooltip/>
        <el-table-column prop="topOneDoctor" label="最高就诊医生" show-overflow-tooltip/>
        <el-table-column prop="totalNum" label="就诊次数" show-overflow-tooltip/>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button icon="Notebook" text type="primary" @click="seeDoctorViewOpen(scope.row)">查看就诊记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                  v-bind="state.pagination"/>


      <see-doctor-view ref="seeDoctorViewRef"></see-doctor-view>
    </div>
  </el-dialog>
</template>
<script setup lang="ts" name="allSign">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {
  admissionRecordWithDoctors,
  getComplianceWithFamilyDoctors,
  getNoComplianceWithFamilyDoctors
} from "/@/api/blood/bloodFamilyDoctor";

const seeDoctorView = defineAsyncComponent(() => import('./seeDoctorView.vue'));

const seeDoctorViewRef = ref();
const visible = ref(false);
const title = ref('');
const typeRoom = ref(0);
const showSearch = ref(true);

const queryRef = ref();

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
})

const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  tableStyle
} = useTable(state);

const openDialog = (doctorId, type, startTime, endTime) => {
  queryRef.value?.resetFields();
  visible.value = true;
  typeRoom.value = type;
  if (doctorId) {
    state.queryForm.doctorId = doctorId;
  }
  state.queryForm.startTime = startTime;
  state.queryForm.endTime = endTime;
  if (type === 1) {
    title.value = '总签约患者';
    state.pageList = admissionRecordWithDoctors;
  } else if (type === 2) {
    title.value = '完成就诊';
    state.pageList = getComplianceWithFamilyDoctors;
  } else if (type === 3) {
    title.value = '未完成就诊';
    state.pageList = getNoComplianceWithFamilyDoctors;
  }
  getDataList()
};

const seeDoctorViewOpen = (row: any) => {
  seeDoctorViewRef.value.openDialogSee(typeRoom.value === 2 ? state.queryForm.doctorId : "", row.card, state.queryForm.startTime, state.queryForm.endTime);
};


const queryBtn = () => {
  getDataList();
};

const resetQuery = () => {
  queryRef.value?.resetFields();
  getDataList();
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>
